<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="/skin/css/amazeui.min.css">
<link href="/skin/css/index.css" rel="stylesheet" type="text/css" />
<script src="/skin/js/jquery.js"></script>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>{$sys[webname]}</title>
<script>
	// 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
	(function(){
		var docEl = document.documentElement;
		var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
		function recalc() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
		}
		if (!document.addEventListener) return;
		window.addEventListener(resizeEvt, recalc, false);
		document.addEventListener('DOMContentLoaded', recalc, false);
		recalc();
	})();
</script>
<style>
	body {
		margin: 0;
		padding-bottom: 0.88rem;
		background: #fff;
	}
	a {
		-webkit-tap-highlight-color: transparent;
		outline: none;
	}
	/* 商品图片轮播区域 */
	.goods-image-section {
		background: #000;
	}
	.main-carousel {
		position: relative;
		width: 100%;
		height: 4rem;
		overflow: hidden;
		background: #000;
		touch-action: manipulation;
	}
	.carousel-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.carousel-slides {
		display: flex;
		height: 100%;
		transition: transform 0.3s ease;
		will-change: transform;
	}
	.carousel-slide {
		flex: 0 0 100%;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
	}
	.carousel-slide img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
		pointer-events: none;
	}
	/* 缩略图导航 - 放在轮播图内部底部 */
	.thumbnails-nav {
		position: absolute;
		bottom: .1rem;
		left: 0;
		right: 0;
		padding: 0.12rem 0.16rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 10;
	}
	.thumbnails-nav::-webkit-scrollbar {
		display: none;
	}
	.thumbnails-list {
		display: flex;
		gap: 0.12rem;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.thumbnails-list li {
		flex-shrink: 0;
		width: 0.46rem;
		height: 0.46rem;
		border-radius: 0.04rem;
		overflow: hidden;
		border: 0.01rem solid transparent;
		cursor: pointer;
		background: #ccc;
	}
	.thumbnails-list li.active {
		border-color: #ccc;
		border-width: 0.01rem;
		box-shadow: 0 0 0 0.01rem rgba(255, 255, 255, 0.5);
	}
	.thumbnails-list li img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	/* 商品信息区域 */
	.goods-info {
		padding: 0.2rem 0.16rem;
		background: #fff;
		border-top-left-radius: 0.12rem;
		border-top-right-radius: 0.12rem;
		margin-top: -0.1rem;
		position: relative;
		z-index: 11;
	}
	.goods-title {
		font-size: 0.18rem;
		font-weight: 700;
		color: #131C35;
		margin-bottom: 0.17rem;
		line-height: 1.4;
	}
	.goods-tags {
		display: flex;
		align-items: center;
		gap: 0.08rem;
		flex-wrap: wrap;
	}
	.tag-item {
		display: inline-block;
		padding: 0.02rem 0.08rem;
		border-radius: 0.02rem;
		border: 0.01rem solid #31374C;
		font-size: 0.12rem;
		color: #31374C;
	}
	.stock-info {
		font-size: 0.12rem;
		color: #31374C;
		margin-left: auto;
	}
	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 0.12rem;
	}
	.divider {
		height: 0.01rem;
		background: #f0f2f5;
		margin: 0.16rem 0;
	}
	/* 商品详情区域 */
	.goods-detail-section {
		padding: 0.17rem 0;
		background: #fff;
		text-align: center;
	}
	.detail-title {
		font-size: 0.16rem;
		font-weight: 700;
		color: #131C35;
		margin-bottom: 0.24rem;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.detail-title::before,
	.detail-title::after {
		content: '';
		width: 20%;
		height: 0.01rem;
		background: #e5e7eb;
	}
	.detail-title::before {
		margin-right: 0.16rem;
	}
	.detail-title::after {
		margin-left: 0.16rem;
	}
	
	.detail-text {
		text-align: left;
		font-size: 0.14rem;
		color: #666;
		line-height: 1.6;
	}
	.detail-text p {
		margin: 0.12rem 0;
	}
	.detail-text img {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		display: block;
		margin: 0.12rem 0;
	}
	/* 底部购买栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 0.66rem;
		background: #fff;
		border-top: 0.01rem solid #f0f2f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.16rem;
		z-index: 100;
		box-shadow: 0 -0.02rem 0.08rem rgba(0,0,0,0.05);
	}
	.bottom-price {
		font-weight: 700;
		color: #131C35;
	}
	.bottom-price .price{
		font-size: 0.2rem;
	}
	.bottom-price .price-symbol {
		font-size: 0.16rem;
		font-weight: 400;
	}
	.buy-button {
		width: 1.87rem;
		height: 0.44rem;
		background: #31374C;
		color: #fff;
		border: none;
		border-radius: 0.02rem;
		font-size: 0.14rem;
		font-weight: 600;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
	}

	.buy-button:link,
	.buy-button:visited {
		color: #fff;
	}

	.buy-button:active {
		opacity: 0.8;
		color: #fff;
	}
	/* 颜色和尺码选择 */
	.color .on,.size .sel { color:red;}
</style>
</head>
<body>
<header id="header">
	<section class="head-b head-b1">
		<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"/></a></span>
		<h1 id="t0">商品详情</h1>
		<div class="u-right" href="#">
			<a href="/" class="hSearch right"><img src="/skin/img/i_home.png"/></a>
		</div>
	</section>
</header>
<div class="main">
	<!-- 分享弹窗 -->
	<div class='fx'>
		<div class="gb"></div>
		<div class="am-slider am-slider-default scoll" data-am-flexslider id="demo-slider-0">
			<ul id="fxPic" class="am-slides">
				<?php for($i=0;$i<count($ginfo['gthumb1']);$i++){?>
				<li>
					<img src="/skin/img/li1.jpg" alt=""><a href="" download="商品分享" class="xiazai">下载</a>
				</li>
				<?php }?>
			</ul>
		</div>
	</div>
	
	<!-- 商品图片区域 -->
	<div class="goods-image-section">
		<!-- 主轮播图 -->
		<div class="main-carousel" id="mainCarousel">
			<div class="carousel-wrapper">
				<div class="carousel-slides" id="carouselSlides">
					<?php for($i=0;$i<count($ginfo['gthumb1']);$i++){?>
					<div class="carousel-slide">
						<img src="<?php echo $ginfo['gthumb1'][$i];?>" alt="" />
					</div>
					<?php }?>
				</div>
			</div>
			<!-- 缩略图导航 - 放在轮播图内部底部 -->
			<div class="thumbnails-nav">
				<ul class="thumbnails-list" id="thumbnails">
					<?php for($i=0;$i<count($ginfo['gthumb1']);$i++){?>
					<li class="<?php echo $i==0?'active':'';?>" data-index="<?php echo $i;?>">
						<img src="<?php echo $ginfo['gthumb1'][$i];?>" alt="" />
					</li>
					<?php }?>
				</ul>
			</div>
		</div>
	</div>
	
	<!-- 商品信息区域 -->
	<div class="goods-info">
		<div class="goods-title">{$ginfo[gname]}</div>
		<div class="info-row">
			<div class="goods-tags">
				<span class="tag-item">倾城系列</span>
				<span class="tag-item">18K金热门款</span>
			</div>
			<div class="stock-info">库存{$ginfo[gtotal]}件</div>
		</div>
		<!-- <div class="divider"></div> -->
	</div>
	
	<!-- 商品详情 -->
	<div class="goods-detail-section">
		<div class="detail-title">商品详情</div>
		<div class="detail-text">
			{$ginfo[gcontent]}
		</div>
	</div>
	
	<!-- 颜色和尺码选择 -->
	{if($gg)}
	<div class='gg'>
		<div class="gg-t">颜色</div>
		<ul class='color gg-z'>
			<?php for($i=0;$i<count($esku['color']);$i++){?>
			<li data-text="<?php echo $esku['color'][$i];?>"  <?php if($i==0){ echo "class='on' data-on=1";}else{ echo "data-on=0";}?>><?php echo $esku['color'][$i];?></li>
			<?php }?>
		</ul>
	</div><div class='gg'>
		<div class="gg-t">尺码</div>
		<ul class='size gg-z'>
			{loop $size $key as $list}
			<li data-text="{$list[size]}" data-num="{$list[kc]}" data-snum="{$list[xl]}">{$list[size]}</li>
			{/loop}
		</ul>
	</div>
	<input type='hidden' id='c' value="<?php echo $esku['color'][0];?>" />
	<input type='hidden' id='s' value="" />
	{else}
	<input type='hidden' id='c' value="" />
	<input type='hidden' id='s' value="" />
	{/if}
</div>

<!-- 底部购买栏 -->
<div class="bottom-bar">
	<div class="bottom-price">
		<span class="price-symbol">¥</span>
		<span class="price">{$ginfo[cash]}</span>
	</div>
	<a class="buy-button" href="javascript:" onclick="order({$ginfo[Id]})">立即购买</a>
</div>
<script>
	$(".color li").on("click",function(){
		var color = $(this).attr("data-text");
		$(".color li").removeClass("on");
		$(this).addClass("on");
		$("#c").val(color);		
		$.ajax({
			type:"post",
			dataType:"json",
			url:"/Moudelu.php?m=g&a=getskuinfo",
			data:"id={$ginfo[Id]}&color="+color,
			success:function(d){				
				if(d[0]==0){
					alert(d[1]);
				}else{
					$(".size").html(d[1]);;
				}
			}
		});
	});
	$(".size").delegate("li","click",function(){		
		$(".size li").removeClass("sel");
		$(this).addClass("sel");
		$("#s").val($(this).attr("data-text"));
		$("#total").html($(this).attr("data-num"));
		$(".snum").html($(this).attr("data-snum"));
	});
	let dianji = true;
	let huoqu = false
	$(".share").on("click",function(){
		if (dianji) {
			dianji = false;
			$.ajax({
				type:"post",
				dataType:"json",
				url:"/Moudelu.php?m=g&a=share",
				data:"id="+{$ginfo[Id]},
				success:function(d){
					if(d[0]==2){
						window.location.href='login.php';return false;
					}if(d[0]==0){
						alert(d[1]);
					}else{
						/*$(".fx").html(d[1]);*/
						console.log(d[1]);
						let imgS = d[1];
						console.log(imgS.length);
						for (let i = 0;i<imgS.length;i++) {
							console.log(i);
							let pics = imgS[i];
							$("#fxPic li img").eq(i).attr('src',pics);
							$("#fxPic li a").eq(i).attr('href',pics);
						}
						$(".fx").css({"z-index":99999999,"opacity":1});
						huoqu = true;
					}
				}
			});
		} else if(huoqu) {
			$(".fx").css({"z-index":99999999,"opacity":1});
		}

	});
	$(".fx .gb").click(function () {
		$(".fx").css({"z-index":-1,"opacity":0});
	});
	function order(id){
		var num = Number($("#num").val());
		var total = Number($("#total").html());
		var c = $("#c").val();
		var s = $("#s").val();
		var ticket = $("#ticket").val();
		if(num<1 || num>total){return false;}
		$.ajax({
			type:"post",
			dataType:"json",
			url:"/Moudelu.php?m=g&a=cart",
			data:"id="+{$ginfo[Id]}+"&c="+c+"&s="+s+"&ticket="+ticket,
			success:function(d){
				if(d[0]==2){
					window.location.href='login.php';return false;
				}
				if(d[0]==0){
					alert(d[1]);
				}
				else{
								
					window.location.href='cart.php';
				}
			}
		});
	}
	function cart(id){
		var num = Number($("#num").val());
		var total = Number($("#total").html());
		var c = $("#c").val();
		var s = $("#s").val();
		var ticket = $("#ticket").val();
		if(num<1 || num>total){return false;}
		$.ajax({
			type:"post",
			dataType:"json",
			url:"/Moudelu.php?m=g&a=cart",
			data:"id="+id+"&num="+num+"&c="+c+"&s="+s+"&ticket="+ticket,
			success:function(d){
				if(d[0]==2){
					window.location.href='login.php';return false;
				}
				if(d[0]==0){
					alert(d[1]);
				}
				else{
					alert(d[1]);					
				}
			}
		});
	}
	{if($ginfo['cplx']!=1)}
	num = $("#num").val();
	total = $("#total").html();
	$(".add").click(function(){
		if(num>=total){return false;}
		else{ num++; $("#num").val(num);}
	})
	$(".dec").click(function(){
		if(num<=1){return false;}
		else{ num--; $("#num").val(num);}
	})
	{/if}
</script>
<script src="/skin/js/canshu.js"></script>
<script>
	// 自定义轮播组件
	(function(){
		var Carousel = {
			currentIndex: 0,
			totalSlides: 0,
			startX: 0,
			startY: 0,
			currentX: 0,
			currentY: 0,
			isDragging: false,
			isHorizontal: null,
			slidesEl: null,
			thumbnailsEl: null,
			autoPlayTimer: null,
			autoPlayDelay: 4000,
			
			init: function() {
				this.slidesEl = document.getElementById('carouselSlides');
				this.thumbnailsEl = document.getElementById('thumbnails');
				if (!this.slidesEl || !this.thumbnailsEl) return;
				
				this.totalSlides = this.slidesEl.children.length;
				if (this.totalSlides === 0) return;
				
				// 绑定缩略图点击事件
				var thumbnails = this.thumbnailsEl.querySelectorAll('li');
				var self = this;
				thumbnails.forEach(function(thumb, index) {
					thumb.addEventListener('click', function(e) {
						e.preventDefault();
						var targetIndex = parseInt(this.getAttribute('data-index')) || index;
						self.goToSlide(targetIndex);
					});
				});
				
				// 触摸事件
				var carousel = document.getElementById('mainCarousel');
				if (carousel) {
					carousel.addEventListener('touchstart', function(e) {
						self.handleTouchStart(e);
					}, { passive: true });
					carousel.addEventListener('touchmove', function(e) {
						self.handleTouchMove(e);
					}, { passive: false });
					carousel.addEventListener('touchend', function(e) {
						self.handleTouchEnd(e);
					}, { passive: true });
					
					// 鼠标事件（桌面端）
					carousel.addEventListener('mousedown', function(e) {
						self.handleTouchStart(e);
					});
					carousel.addEventListener('mousemove', function(e) {
						if (self.isDragging) {
							self.handleTouchMove(e);
						}
					});
					carousel.addEventListener('mouseup', function(e) {
						if (self.isDragging) {
							self.handleTouchEnd(e);
						}
					});
					carousel.addEventListener('mouseleave', function(e) {
						if (self.isDragging) {
							self.handleTouchEnd(e);
						}
					});
				}
				
				// 初始化显示第一张
				this.updateSlide();
				this.updateThumbnails();
				this.startAutoPlay();
			},
			
			goToSlide: function(index) {
				if (index < 0 || index >= this.totalSlides) return;
				this.currentIndex = index;
				this.updateSlide();
				this.updateThumbnails();
				this.resetAutoPlay();
			},
			startAutoPlay: function(){
				var self = this;
				if(this.totalSlides <= 1) return;
				this.stopAutoPlay();
				this.autoPlayTimer = setInterval(function(){
					self.goToSlide((self.currentIndex + 1) % self.totalSlides);
				}, this.autoPlayDelay);
			},
			stopAutoPlay: function(){
				if(this.autoPlayTimer){
					clearInterval(this.autoPlayTimer);
					this.autoPlayTimer = null;
				}
			},
			resetAutoPlay: function(){
				this.stopAutoPlay();
				this.startAutoPlay();
			},
			
			updateSlide: function() {
				if (!this.slidesEl) return;
				var translateX = -this.currentIndex * 100;
				this.slidesEl.style.transform = 'translateX(' + translateX + '%)';
			},
			
			updateThumbnails: function() {
				if (!this.thumbnailsEl) return;
				var thumbnails = this.thumbnailsEl.querySelectorAll('li');
				thumbnails.forEach(function(thumb, index) {
					if (index === Carousel.currentIndex) {
						thumb.classList.add('active');
					} else {
						thumb.classList.remove('active');
					}
				});
			},
			
			handleTouchStart: function(e) {
				this.isDragging = true;
				this.isHorizontal = null;
				var touch = e.touches ? e.touches[0] : e;
				this.startX = touch.clientX;
				this.startY = touch.clientY;
				this.currentX = this.startX;
				this.currentY = this.startY;
				this.stopAutoPlay();
				
				// 禁用过渡动画
				if (this.slidesEl) {
					this.slidesEl.style.transition = 'none';
				}
			},
			
			handleTouchMove: function(e) {
				if (!this.isDragging) return;
				
				var touch = e.touches ? e.touches[0] : e;
				this.currentX = touch.clientX;
				this.currentY = touch.clientY;
				
				// 首次移动时判断滑动方向
				if (this.isHorizontal === null) {
					var diffX = Math.abs(this.currentX - this.startX);
					var diffY = Math.abs(this.currentY - this.startY);
					this.isHorizontal = diffX > diffY;
				}
				
				// 只有水平滑动时才阻止默认行为和处理轮播
				if (this.isHorizontal) {
					e.preventDefault();
				var diffX = this.currentX - this.startX;
				var translateX = -this.currentIndex * 100 + (diffX / window.innerWidth * 100);
				
				if (this.slidesEl) {
					this.slidesEl.style.transform = 'translateX(' + translateX + '%)';
					}
				}
			},
			
			handleTouchEnd: function(e) {
				if (!this.isDragging) return;
				this.isDragging = false;
				
				// 只有水平滑动时才处理轮播切换
				if (this.isHorizontal) {
				// 恢复过渡动画
				if (this.slidesEl) {
					this.slidesEl.style.transition = 'transform 0.3s ease';
				}
				
				var diffX = this.currentX - this.startX;
				var threshold = window.innerWidth * 0.2; // 20% 的滑动阈值
				
				if (Math.abs(diffX) > threshold) {
					if (diffX > 0 && this.currentIndex > 0) {
						// 向右滑动，显示上一张
						this.goToSlide(this.currentIndex - 1);
					} else if (diffX < 0 && this.currentIndex < this.totalSlides - 1) {
						// 向左滑动，显示下一张
						this.goToSlide(this.currentIndex + 1);
					} else {
						// 滑动距离不够，回到当前
						this.updateSlide();
					}
				} else {
					// 滑动距离不够，回到当前
					this.updateSlide();
				}
				}
				this.startAutoPlay();
			}
		};
		
		// 页面加载完成后初始化
		if (document.readyState === 'loading') {
			document.addEventListener('DOMContentLoaded', function() {
				Carousel.init();
			});
		} else {
			Carousel.init();
		}
		document.addEventListener('visibilitychange', function(){
			if(document.hidden){
				Carousel.stopAutoPlay();
			}else{
				Carousel.startAutoPlay();
			}
		});
		
		// 初始化分享弹窗轮播图（如果需要的话）
		$(function(){
			// 分享弹窗轮播图仍然使用 amazeui（如果存在）
			if (typeof $.fn.flexslider === 'function') {
				$('#demo-slider-0').flexslider({
					animationLoop: false,
				});
			}
			
			// 商品规格选择
			$(".goodsGuige a").click(function () {
				$(".goodsGuige a").removeClass("active");
				$(this).addClass("active");
				$("#ticket").val( $(this).text());
			});
		});
	})();
</script>

</body>
</html>